<template>
    <div class="table table-no-element-style" v-loading="loading">
        <div class="header" :class="{'overflow-width':classArr.length>12}">
            <p v-for="(item,index) in tableHeader" :key="index">{{item.term}} 
                <span v-if="index!=0&&index!==tableHeader.length-1">{{'（'+item.score+'）'}}</span> 
                <span v-if="index==tableHeader.length-1">{{item.score}}</span> 
            </p>
        </div>
        <div v-if="classArr.length>0">
            <div class="con">
                <!-- row 是每一行 -->
                <div v-for="(item,index) in classArr" :key="index" class="row">
                    <!-- p 是该行的 每一项 -->
                    <p>{{item.className}}</p>
                    <p v-for="(item1,index1) in item.inputArr" :key="index1"> 
                        <span>
                            <el-input v-model="item1.score" :value="item1.score"
                            placeholder="请输入分数" 
                            @change="inputChange($event,index,index1)"
                            :readonly="index1==item.inputArr.length-1"
                            >
                            </el-input>
                        </span>
                    </p>
                </div>                                                                                                     
            </div>
            <div class="footer">
                <el-button type="primary" @click="addDataForm()" >发 布</el-button>
            </div>
        </div>
        <div v-else class="no-data">
            <p>暂无班级数据</p>
        </div>
    </div>
</template>
<script>
import { modifyRatingInfo } from 'api/wisdom';
import { mapGetters } from 'vuex';
export default {
    props: {
        tableHeader: {
            type: Array,
            required: true,
            default() {
                return []
            }
        },
        classArr: {
            type: Array,
            required: true,
            default() {
                return []
            }
        }
    },
    data() {
        return {
            loading: false,
            status: 'false'
        }
    },
    // watch: {
    //     'classArr': {
    //         handler(val, oldVal) {
    //             console.log(val, '-------++-----');// 
    //         },
    //         deep: true
    //     }
    // },
    
    computed: {
        ...mapGetters([
            'schoolId'
        ])
    },
    methods: {
        // 输入评分时 总分要自动计算
        inputChange(val, index, index1) {
            let totleIndex=this.tableHeader.length-2;
            let totleNum='';
            let regu=/^[0-9]+.?[0-9]*$/;// 数 1.2 2.3  30  34
            this.classArr[index].inputArr.forEach((item, index1) => {
                if (!regu.test(item.score)) {
                    totleNum='';
                } else {
                    if (item.score&&index1!==totleIndex) {
                        totleNum=Number(totleNum)+Number(item.score)
                    }
                }
                this.classArr[index].inputArr[totleIndex].score=totleNum
            })
        },
        // 发布
        addDataForm() {
            let json=[];
            this.classArr.forEach((item, index) => {
                let list=[];
                item.inputArr.forEach((element, index1) => {
                    if (index1!==item.inputArr.length-1) {// 不包括总分
                        // if(element.score){//填写分数的班级 才发给后台
                        list.push({
                            score: element.score, // 不填写的班级发0
                            ratingPosition: element.ratingPosition,
                            sRatingId: element.sRatingId,
                            maxScore: element.maxScore, // 后台不需要的
                            sRatingName: element.termName// 后台不需要的
                        })
                    }
                })
                // if(list.length){//保证 都是填好分数的班级
                json.push({
                    fClassId: item.classId,
                    sClassName: item.className,
                    list
                })
            })
            // 对json的list验证，输入框输入的必须是正整数
            if (this.scoreValidator(json)) {
                this._modifyRatingInfo(json)// 发布评分
            }
        },
        // 输入评分的验证
        scoreValidator(json) {// json 是每行信息（各个班级）
            let regu = /^[1-9]\d*$/;// 正整数
            for (var i=0;i<json.length;i++) {
                let num=0;
                let item=json[i];
                if (item.list) {
                    for (var j=0;j<item.list.length;j++) {
                        let elem=item.list[j]
                        if (elem.score) {
                            num++;
                            if (!regu.test(elem.score)) {
                                this.$message.info('分数只允许为正整数')
                                return false
                            } 
                            if (parseInt(elem.score)>parseInt(elem.maxScore)) {
                                this.$message.info(`${item.sClassName}的${elem.sRatingName}分数超出最高分数`)
                                return false
                            }
                        }
                    }
                }
                if (num!==0&&num!==item.list.length) {
                    this.$message.info('有班级分数未填写完整')
                    return false
                }
            }
            return true
        },

        // 发布评分
        _modifyRatingInfo(json) {
            this.loading = true;
            modifyRatingInfo(json).then(res => {
                this.loading = false;
                this.$message({
                    type: 'success',
                    message: '发布评分成功'
                })
                this.$router.push('/classScore')
                this.$emit('searchList')
            }).catch(() => {
                this.loading = false;
            })
        }
    }
}
</script>

<style lang="scss" scoped>
.table {
    .header{
        display: flex;
        flex-wrap: nowrap;
        justify-content: space-between;
        color: #999;
        height: 40px;
        line-height: 40px;
        background: #F3F3F3;
        // border-bottom: 1px solid #ebebeb;
        text-align: center;
        p{
            flex: 1;
            height: 100%;
            border:1px solid #ebebeb;
            text-align: center;
            font-size: 14px;
        }
    }
    .overflow-width{
        padding-right:17px;
    }
    .con{
         max-height:480px;
         overflow-y: auto;
         border-right:1px solid #ebebeb;
        .row{
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            height: 40px;
            line-height: 40px;
            p{
                text-align: center;
                flex: 1;
                border:1px solid #ebebeb;
                border-top:none;
                border-right:none;
                font-size:14px;
            }
        }
    }
    .no-data{
       line-height: 40px;
       color: #999;
       padding-bottom: 30px;
       p{
            border: 1px solid #ebebeb;
            border-top: 0;
            text-align: center;
            font-size: 14px;
       }     
    }
    .footer{
        margin:30px 0;
        padding-bottom:30px;
        text-align: center;
    }
}
</style>

